<template>
  <div class="page">
    <!-- 顶部题目进度栏 -->
    <div class="topLine flexcolcenter flexbet">
      <div style="width: 160rpx">
        <image
          @click.stop="menu = !menu"
          v-if="menu"
          src="@/static/images/exam/expand_menu.png"
          class="topicListIcon"
        ></image>
        <image
          @click.stop="menu = !menu"
          v-else
          src="@/static/images/exam/menu.png"
          class="topicListIcon"
        >
        </image>
      </div>

      <div class="topic flexcolcenter">
        <div class="topicFraction">
          {{ curIndex + 1 }}/{{ topicList.length }}
        </div>
        <div class="topicProgress">
          <van-progress
            color="#ff9a00"
            :percentage="parseInt(((curIndex + 1) / topicList.length) * 100)"
          />
        </div>
      </div>
      <div class="cutdown flexcen flexcolcenter" v-if="status == 'inProgress'">
        <img class="cutdown_icon" src="@/static/images/exam/clock.png" alt="" />
        <van-count-down :time="time" format="mm:ss" />
      </div>
      <div style="width: 160rpx" v-else></div>
    </div>
    <!-- 题目swiper -->
    <swiper
      :current="curIndex"
      ref="swipe"
      @change="onChange"
      :initial-swipe="curIndex"
      :style="{
        height: `calc(100vh - ${safeAreaBottom}rpx - 86rpx - 120rpx)`,
      }"
      class="topicSwiper"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
    >
      <swiper-item
        class="topicswiperItem"
        v-for="(item, index) in topicList"
        :key="index"
      >
        <!-- 题目 -->
        <div class="topicItem">
          <!-- 题目文本 -->
          <div class="topicItem_name rela">
            <div class="topicItem_type abso">
              {{ topicType[item.topicType].type }}
            </div>
            <div class="topicItem_name_txt">
              {{ item.topicContent }}({{ item.score }}分)
            </div>
          </div>
          <!-- 题目图片 -->
          <div
            class="flex"
            style="margin: 20rpx 0 80rpx 0"
            v-if="item.topicPic && item.topicPic.length > 0"
          >
            <image
              @click="preview(item.topicPic)"
              style="width: 100rpx; margin: 0 10rpx 10rpx 0"
              mode="widthFix"
              v-for="(item1, index1) in item.topicPic"
              :key="index1"
              :src="item1"
            ></image>
          </div>
          <!-- 选项用于非简答 非实操 topicItem_option_error-->
          <div
            v-if="item.topicType < 4"
            :class="[
              'topicItem_option',
              'flex',
              item2.error
                ? 'topicItem_option_error'
                : item2.selected
                ? 'topicItem_option_select'
                : '',
            ]"
            @click="
              status == 'inProgress' ? optionClick(item2, index2, index) : ''
            "
            v-for="(item2, index2) in item.topicOptionList"
            :key="index2"
          >
            <!--0 1 2如果是单选 多选题 判断题-->
            <div
              class="topicItem_option_letter"
              v-if="item.topicType == 0 || item.topicType == 1"
            >
              {{ letter[index2] }}
            </div>
            <div
              class="topicItem_option_txt"
              v-if="
                item.topicType == 0 ||
                item.topicType == 1 ||
                item.topicType == 2
              "
            >
              {{ item2.optionValue }}
            </div>
            <!-- 3 如果是填空题 -->
            <div class="topicItem_option_letter" v-if="item.topicType == 3">
              {{ index2 + 1 }}.
            </div>
            <div class="topicItem_option_txt" v-if="item.topicType == 3">
              <input
                :disabled="status !== 'inProgress'"
                @blur="
                  status == 'inProgress'
                    ? optionBlur($event, index, item2, index2)
                    : ''
                "
                type="text"
                v-model="item2.optionValue"
                placeholder="请输入答案"
              />
            </div>
          </div>
          <!-- 实操 简答题 -->
          <div
            class="shortAnswerBox"
            v-if="item.topicType == 4 || item.topicType == 5"
          >
            <van-field
              :disabled="status !== 'inProgress'"
              @blur="shortAnswerBlur($event, index)"
              :value="item.topicAnswer.answer"
              rows="1"
              autosize
              :border="false"
              type="textarea"
              placeholder="请输入答案 "
            />
            <van-uploader
              :show-upload="status == 'inProgress'"
              :disabled="status !== 'inProgress'"
              :deletable="status == 'inProgress'"
              :file-list="item.fileInfo"
              accept="media"
              upload-text="点击上传"
              :max-count="9"
              @after-read="beforeRead"
              @delete="beforeDelete"
              multiple
            ></van-uploader>
            <div class="tip" v-if="status !== 'result'">
              <span>*</span>照片、视频大小不可超过10MB
            </div>
          </div>
          <!-- 答案解析 批改的时候 和 查看考试结果的时候-->
          <div class="topicItem_resolve" v-if="status !== 'inProgress'">
            <!-- <div class="topicItem_resolve_title">答案解析</div> -->
            <div class="topicItem_resolve_true flex" v-if="item.trueAnswer">
              <div class="topicItem_resolve_true_lable">正确答案</div>
              <div class="topicItem_resolve_true_value">
                {{ item.trueAnswer ? item.trueAnswer : "" }}
              </div>
            </div>
            <!-- 答案解析图片 -->
            <div
              class="flex"
              style="margin: 20rpx 0 0rpx 0"
              v-if="item.resolvePic && item.resolvePic.length > 0"
            >
              <image
                @click="preview(item.resolvePic)"
                style="width: 100rpx; margin: 0 10rpx 10rpx 0"
                mode="widthFix"
                v-for="(item1, index1) in item.resolvePic"
                :key="index1"
                :src="item1"
              >
              </image>
            </div>
            <!-- 非练习 且查看考试结果的时候才能看到老师批注 -->
            <div
              class="topicItem_resolve_true flexcolcenter"
              v-if="type !== 'practice' && status == 'result'"
            >
              <div class="topicItem_resolve_true_lable">老师批注</div>
              <div class="topicItem_resolve_true_value">
                {{ item.teacherRemark ? item.teacherRemark : "" }}
              </div>
            </div>
            <!-- 非练习 且查看考试结果的时候才能看到题目得分 item.topicType == 4 || item.topicType == 5-->
            <!-- 非练习 批改的时候能看到除去简答操作题的评分 -->
            <div
              class="topicItem_resolve_true flexcolcenter"
              v-if="
                type !== 'practice' &&
                (status == 'result' ||
                  (status == 'correct' && item.topicType < 4))
              "
            >
              <div class="topicItem_resolve_true_lable">题目得分</div>
              <div class="topicItem_resolve_true_value">
                {{ item.scoreGot ? item.scoreGot : 0 }}分
              </div>
            </div>
            <!-- 不管是批改 还是 查看试卷结果的时候都能看题目解析 -->
            <div class="topicItem_resolve_txt" v-if="status !== 'inProgress'">
              {{ item.resolve ? item.resolve : "暂无题目解析" }}
            </div>
            <!-- 批改的时候 启用批改弹框 和 教师批注输入-->
            <div
              class="topicItem_resolve_true flexcolcenter"
              v-if="status == 'correct'"
            >
              <div class="topicItem_resolve_true_lable">题目打分</div>
              <van-field
                @blur="correctScoreBlur($event, index)"
                :value="item.correctScore"
                :border="false"
                type="number"
                placeholder="请打分"
              />
            </div>
            <div class="topicItem_resolve_true flex" v-if="status == 'correct'">
              <div class="topicItem_resolve_true_lable">批注</div>
              <div class="topicItem_resolve_true_teacherRemark" style="flex: 1">
                <van-field
                  @blur="teacherRemarkBlur($event, index)"
                  :value="item.teacherRemark"
                  :border="false"
                  rows="1"
                  autosize
                  type="textarea"
                  placeholder="请输入批注"
                />
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
    <!-- 底部按钮 -->
    <div
      :class="['bottomLine', curIndex == 0 ? 'flexend' : 'flexbet']"
      :style="{ paddingBottom: safeAreaBottom + 'rpx' }"
    >
      <div class="pre" v-if="curIndex > 0" @click="curIndex--">上一题</div>
      <div
        class="next"
        v-if="curIndex < topicList.length - 1"
        @click="curIndex++"
      >
        下一题
      </div>
      <div
        class="next"
        v-if="curIndex == topicList.length - 1 && status == 'inProgress'"
        @click="handleSumbit"
      >
        提 交
      </div>
      <div
        class="next"
        v-if="curIndex == topicList.length - 1 && status == 'correct'"
        @click="correctSumbit"
      >
        批改完成
      </div>
    </div>
    <!-- 提交确认框 -->
    <vDialog
      :showDialog.sync="SumbitConfirmOpen"
      :contentText="
        allFinish ? '是否确认提交?' : '您还有试题未完成,是否确认提交?'
      "
      @confirm="SumbitConfirm"
    ></vDialog>
    <!-- 题号卡 -->

    <van-overlay :lock-scroll="false" :show="menu" @click="menu = false">
      <div @click.stop="" class="NoContain">
        <!-- 题号盒子 -->
        <div class="NoBox">
          <div
            v-for="(item, index) in topicType"
            :key="index"
            v-if="item.list.length > 0"
          >
            <div class="NoBox_title">
              <span>{{ item.type }}</span
              >共{{ item.list.length }}题
            </div>
            <div class="NoBox_topic flex">
              <div v-for="(item2, index2) in topicList" :key="index2">
                <!-- 做题中的时候 -->
                <div
                  @click.stop="topicNoClick(index2)"
                  v-if="item2.topicType == index && status == 'inProgress'"
                  :class="[
                    'topicNo',
                    item2.haveAnswer
                      ? 'topicNoAnswer'
                      : curIndex == index2
                      ? 'topicNoCur'
                      : '',
                  ]"
                >
                  {{ index2 + 1 }}
                </div>
                <!-- 查看试卷结果的时候-->
                <div
                  @click.stop="topicNoClick(index2)"
                  v-if="item2.topicType == index && status == 'result'"
                  :class="[
                    'topicNo',
                    item2.scoreGot == item2.score
                      ? 'topicNoAnswer'
                      : 'topicNoError',
                  ]"
                >
                  {{ index2 + 1 }}
                </div>
                <!-- 批改的时候 -->
                <div
                  @click.stop="topicNoClick(index2)"
                  v-if="item2.topicType == index && status == 'correct'"
                  :class="[
                    'topicNo',
                    item2.correctScore
                      ? 'topicNoAnswer'
                      : curIndex == index2
                      ? 'topicNoCur'
                      : '',
                  ]"
                >
                  {{ index2 + 1 }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 确认框 -->
        <div
          class="confirmbox flexcen flexcolcenter"
          v-if="status == 'inProgress'"
        >
          <div class="confirmBtn" @click.stop="handleSumbit">提 交</div>
        </div>
      </div>
    </van-overlay>
    <!-- 删除图片 -->
    <van-action-sheet
      @cancel="deleteShow = false"
      @select="deleteConfirm"
      :show="deleteShow"
      :actions="deleteActions"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
import { uploadOSS, fammterString, returnType } from "@/common/upload.js";
import { recordStudyTime } from "@/common/api/chapter.js";
import { gradeExamPaperTopic } from "@/common/api/exam.js";
import vDialog from "@/components/v-dialog";
import {
  startTestCheck,
  endTestCheck,
  getStartExam,
  getExamPaper,
  submitSingleAnswer,
  finshExamPaper,
} from "@/common/api/exam";
export default {
  components: {
    vDialog,
  },
  name: "message",
  data() {
    return {
      // 删除图片动作面板
      deleteShow: false,
      deleteActions: [
        {
          name: "删除",
          color: "#ee0a24",
        },
      ],
      deleteFile: "",
      //
      topicType: [
        {
          type: "单选题",
          list: [],
        },
        {
          type: "多选题",
          list: [],
        },
        {
          type: "判断题",
          list: [],
        },
        {
          type: "填空题",
          list: [],
        },
        {
          type: "简答题",
          list: [],
        },
        {
          type: "操作题",
          list: [],
        },
      ],
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K"],
      indicatorDots: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      windowHeight: 0,
      safeAreaBottom: 0,
      startTime: null,
      // 考试卷信息
      examInfo: "",
      topicList: [],
      curIndex: 0,
      endTime: "",
      time: "",
      // 考试是否在进行中
      status: "",
      // 试题是否全部完成
      allFinish: "",
      // 提交弹框
      SumbitConfirmOpen: false,
      // 定时器
      clock: "",
      // 是否展开题号卡
      menu: false,
      // 是否是批改过的
      paperId: "",

      id: "",
      type: "",
      taskId: "",
      taskName: "",
      orderCourseId: "",
      courseStuId: "",
    };
  },
  onLoad(options) {
    console.log("考试页面", options);
    this.taskName = options.taskName;
    uni.setNavigationBarTitle({
      title: options.taskName,
    });
    this.type = options.type;
    this.orderCourseId = options.orderCourseId;
    this.courseStuId = options.courseStuId;
    this.taskId = options.taskId;
    this.id = options.id;
    this.status = options.status;
    this.paperId = options.paperId;

    this.startTime = Date.parse(new Date());
    this.windowHeight = getApp().globalData.$windowHeight;
    this.safeAreaBottom = getApp().globalData.$safeAreaBottom;
    this.getExamTopic();
  },
  async onHide() {
    console.log("记录学习时间");
    if (
      this.startTime &&
      this.taskId &&
      this.status == "inProgress" &&
      this.type !== "testCheck"
    ) {
      await recordStudyTime(
        this.taskId,
        this.courseStuId,
        (Date.parse(new Date()) - this.startTime) / 1000
      );
      this.startTime = null;
    }
  },
  async onUnload() {
    console.log("记录学习时间");
    if (
      this.startTime &&
      this.taskId &&
      this.status == "inProgress" &&
      this.type !== "testCheck"
    ) {
      await recordStudyTime(
        this.taskId,
        this.courseStuId,
        (Date.parse(new Date()) - this.startTime) / 1000
      );
      this.startTime = null;
      if (this.clock) {
        clearInterval(this.clock);
      }
    }
  },
  onShow() {},
  watch: {
    // 监听curIndex的变化
    async curIndex(newVal, oldVal) {},
  },
  methods: {
    /* 批改完成按钮 */
    correctSumbit() {
      let allCorrect = true;
      // 检测所有的简答题和操作题是否完成
      for (let index = 0; index < this.topicList.length; index++) {
        if (
          !this.topicList[index].correctScore &&
          this.topicList[index].topicType > 3
        ) {
          this.curIndex = index;
          uni.showToast({
            title: `第${index + 1}题还未批改`,
            icon: "none",
            duration: 1500,
          });
          allCorrect = false;
          return false;
        }
      }
      if (allCorrect) {
        uni.showToast({
          title: "批改完成",
          icon: "suceess",
          duration: 1500,
        });
        setTimeout(() => {
          // 返回上一页
          uni.navigateBack({
            delta: 1,
          });
        }, 1500);
      }
    },
    /* 给题目打分 index为题目index*/
    async grade(index) {
      // 打分 当为考核 且 该试题已经打分
      if (
        this.type == "onlineExam" &&
        this.status == "correct" &&
        this.topicList[index].correctScore
      ) {
        let res = await gradeExamPaperTopic([
          {
            examPaperTopicId: this.topicList[index].id,
            right: true,
            score: this.topicList[index].correctScore,
            teacherRemark: this.topicList[index].teacherRemark,
          },
        ]);
      }
    },
    /* 输入得分 */
    async correctScoreBlur(e, index) {
      let score = e.detail.value;

      if (score > this.topicList[index].score) {
        score = this.topicList[index].score;
      }
      this.$set(this.topicList[index], "correctScore", score);
      // this.topicList[index].correctScore = score;
      console.log(score, this.topicList[index].score);
      this.grade(index);
    },
    /* 输入批注 */
    teacherRemarkBlur(e, index) {
      this.topicList[index].teacherRemark = e.detail.value;
      this.grade(index);
    },
    preview(urls) {
      uni.previewImage({
        current: "", // 当前显示图片的链接，可选项
        urls: urls, // 需要预览的图片链接列表
        success: function () {
          console.log("预览图片成功");
        },
        fail: function (error) {
          console.log("预览图片失败", error);
        },
      });
    },
    /* 题号点击 */
    topicNoClick(index) {
      console.log(index);
      this.curIndex = index;
    },
    onChange(index) {
      this.curIndex = index.detail.current;
    },
    /* 删除图片 */
    beforeDelete(file, fileList) {
      console.log(file, fileList);
      this.deleteShow = true;
      this.deleteFile = file.detail.file;
    },
    async deleteConfirm(e, index) {
      console.log(e, index);
      if (e.detail.name == "删除") {
        for (
          let i = 0;
          i < this.topicList[this.curIndex].fileInfo.length;
          i++
        ) {
          if (
            this.topicList[this.curIndex].fileInfo[i].url == this.deleteFile.url
          ) {
            this.topicList[this.curIndex].fileInfo.splice(i, 1);
            this.$set(
              this.topicList,
              this.curIndex,
              this.topicList[this.curIndex]
            );
            this.deleteShow = false;
            let data = JSON.parse(
              JSON.stringify(this.topicList[this.curIndex])
            );
            data.fileInfo = JSON.stringify(data.fileInfo);
            data.examPaperTopicId = data.id;
            await submitSingleAnswer(data);
            return false;
          }
        }
      }
    },
    /* 图片上传 */
    async beforeRead(file) {
      console.log(file, "file");
      let res = await uploadOSS(
        file.detail.file,
        fammterString(3, uni.getStorageSync("uuid")),
        false
      );
      console.log(",,,,,,", res);
      this.topicList[this.curIndex].fileInfo = [
        ...(this.topicList[this.curIndex].fileInfo
          ? this.topicList[this.curIndex].fileInfo
          : []),
        ...res,
      ];
      this.$set(this.topicList, this.curIndex, this.topicList[this.curIndex]);
      let data = JSON.parse(JSON.stringify(this.topicList[this.curIndex]));
      data.fileInfo.map((item) => {
        item.type = returnType(item.url);
      });
      data.fileInfo = JSON.stringify(data.fileInfo);
      data.examPaperTopicId = data.id;
      submitSingleAnswer(data);
      return false; // 禁止 `van-uploader` 继续处理文件
    },
    /* 提交按钮 */
    handleSumbit() {
      this.SumbitConfirmOpen = true;
      this.allFinish = true;
      console.log(this.topicList, "------");
      for (let i = 0; i < this.topicList.length; i++) {
        if (
          this.topicList[i].topicType == 4 ||
          this.topicList[i].topicType == 5
        ) {
          if (
            !this.topicList[i].answer &&
            this.topicList[i].fileInfo.length == 0
          ) {
            this.allFinish = false;
          }
        } else {
          if (!this.topicList[i].haveAnswer) {
            this.allFinish = false;
          }
        }
      }
    },
    /* 试卷提交 */
    async SumbitConfirm() {
      // 如果是练习直接显示答案
      if (this.type == "practice") {
        uni.showToast({
          title: "练习提交成功",
          icon: "success",
          duration: 1500,
        });
        this.status = "result";
        this.getExamTopic();
      }
      // 如果是考核抽查需要提交
      else if (this.type == "testCheck") {
        uni.showLoading({
          mask: true,
          title: "加载中",
        });
        // 这里需要提交试卷id
        await endTestCheck(this.examInfo.id);
        uni.showToast({
          title: "试卷提交成功",
          icon: "success",
          duration: 1500,
        });
        uni.redirectTo({
          url: `/pages/selectiCourse/examResult?type=${this.type}&paperId=${this.examInfo.id}&id=${this.id}&taskId=${this.taskId}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&taskName=${this.taskName}`,
        });
      }
      // 如果是考试则需要提交
      else {
        uni.showLoading({
          mask: true,
          title: "加载中",
        });
        // 这里需要提交试卷id
        await finshExamPaper(this.examInfo.id);
        uni.showToast({
          title: "试卷提交成功",
          icon: "success",
          duration: 1500,
        });
        uni.redirectTo({
          url: `/pages/selectiCourse/examResult?type=${this.type}&paperId=${this.examInfo.id}&id=${this.id}&taskId=${this.taskId}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&taskName=${this.taskName}`,
        });
      }
      // 记录学习时间(只有考核和考核抽查需要记录时间)
      if (
        this.startTime &&
        this.taskId &&
        this.status == "inProgress" &&
        this.type !== "testCheck"
      ) {
        await recordStudyTime(
          this.taskId,
          this.courseStuId,
          (Date.parse(new Date()) - this.startTime) / 1000
        );
        this.startTime = null;
      }
    },
    /* 简答题 输入答案 */
    shortAnswerBlur(e, topicIndex) {
      this.topicList[topicIndex].answer = e.detail.value;
      let data = JSON.parse(JSON.stringify(this.topicList[this.curIndex]));
      data.fileInfo = JSON.stringify(data.fileInfo);
      data.examPaperTopicId = data.id;
      submitSingleAnswer(data);
    },
    /* 输入框失去焦点 multiAnswers*/
    optionBlur(e, topicIndex, optionItem, optionIndex) {
      this.topicList[topicIndex].multiAnswers = [];
      let sum = 0;
      this.topicList[topicIndex].topicOptionList.map((item, index) => {
        this.topicList[topicIndex].multiAnswers.push(item.optionValue);
        if (item.optionValue) {
          sum++;
        }
      });
      if (sum == this.topicList[topicIndex].topicOptionList.length) {
        this.topicList[topicIndex].haveAnswer = true;
      } else {
        this.topicList[topicIndex].haveAnswer = false;
      }
      this.topicList[topicIndex].examPaperTopicId =
        this.topicList[topicIndex].id;
      submitSingleAnswer(this.topicList[topicIndex]);
    },
    /* 选项点击 userAnswer*/
    optionClick(optionItem, optionIndex, topicIndex) {
      // 单选 判断
      if (
        this.topicList[topicIndex].topicType == 0 ||
        this.topicList[topicIndex].topicType == 2
      ) {
        this.topicList[topicIndex].topicOptionList.map((item, index) => {
          if (index == optionIndex) {
            item.selected = true;
            this.topicList[topicIndex].userAnswer =
              this.topicList[topicIndex].topicType == 0
                ? item.label
                : item.optionValue;
          } else {
            item.selected = false;
          }
        });
        this.topicList[topicIndex].haveAnswer = true;
        this.$set(this.topicList, topicIndex, this.topicList[topicIndex]);
        this.topicList[topicIndex].answer =
          this.topicList[topicIndex].userAnswer;
        this.topicList[topicIndex].examPaperTopicId =
          this.topicList[topicIndex].id;
        submitSingleAnswer(this.topicList[topicIndex]);
      }
      // 多选
      else if (this.topicList[topicIndex].topicType == 1) {
        this.topicList[topicIndex].topicOptionList.map((item, index) => {
          if (index == optionIndex) {
            item.selected = item.selected ? false : true;
          }
        });
        this.$set(this.topicList, topicIndex, this.topicList[topicIndex]);
        this.topicList[topicIndex].multiAnswers = [];
        this.topicList[topicIndex].topicOptionList.map((item, index) => {
          if (item.selected) {
            this.topicList[topicIndex].multiAnswers.push(item.label);
            this.topicList[topicIndex].haveAnswer =
              this.topicList[topicIndex].multiAnswers.length > 0 ? true : false;
          }
        });
        this.topicList[topicIndex].examPaperTopicId =
          this.topicList[topicIndex].id;
        submitSingleAnswer(this.topicList[topicIndex]);
      } else {
      }
    },
    /* 获取考试题目 */
    async getExamTopic() {
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      let res;
      // 获取试卷的返回结构没变 但是卷子的返回结构变了
      let examPaperTitleList;
      // 如果是练习
      if (this.type == "practice") {
        if (this.status == "inProgress") {
          res = await getStartExam(this.id, this.courseStuId);
          this.paperId = res.id;
          examPaperTitleList = res.examPaperTitleList;
        } else {
          res = await getExamPaper(this.paperId);
          examPaperTitleList = res.examPaper.examPaperTitleList;
        }
      }
      // 如果是考核抽查
      else if (this.type == "testCheck") {
        if (this.status == "inProgress") {
          res = await startTestCheck(this.id);
          examPaperTitleList = res.data.examPaperTitleList;
        } else {
          res = await getExamPaper(this.paperId);
          examPaperTitleList = res.examPaper.examPaperTitleList;
        }
      }
      // 如果是考核
      else {
        // 如果是做题
        if (this.status == "inProgress") {
          res = await getStartExam(this.id, this.courseStuId);
          examPaperTitleList = res.examPaperTitleList;
        }
        // 如果是批改
        else if (this.status == "correct") {
          res = await getExamPaper(this.paperId);
          examPaperTitleList = res.examPaper.examPaperTitleList;
        }
        // 如果是学生查看卷面结果
        else {
          res = await getExamPaper(this.paperId);
          examPaperTitleList = res.examPaper.examPaperTitleList;
        }
      }
      //  考核抽查 和 考试联系 结构不一样（所以这里只用考核抽查做判断）
      this.examInfo = this.type == "testCheck" ? res.data : res;
      this.topicList = [];
      examPaperTitleList.map((item) => {
        item.topicList.map((topic) => {
          if (topic.topicPic && topic.topicPic.length > 0) {
            topic.topicPic = topic.topicPic.split(",");
          }
          if (topic.resolvePic && topic.resolvePic.length > 0) {
            topic.resolvePic = topic.resolvePic.split(",");
          }
          // 如果是单选题
          if (topic.topicType == 0) {
            if (topic.topicAnswer) {
              topic.topicOptionList.map((item) => {
                if (topic.topicAnswer.answer == item.label) {
                  item.selected = true;
                  // !!!用于检查是否错误
                  if (this.status == "result") {
                    item.error = item.label == topic.trueAnswer ? false : true;
                  }
                }
              });
              topic.haveAnswer = true;
            } else {
              topic.haveAnswer = false;
            }
          }
          // 如果是多选题
          if (topic.topicType == 1) {
            if (topic.topicAnswer) {
              topic.topicOptionList.map((item) => {
                if (topic.topicAnswer.multiAnswers) {
                  if (topic.topicAnswer.multiAnswers.includes(item.label)) {
                    item.selected = true;
                    // !!!用于检查是否错误
                    if (this.status == "result") {
                      item.error =
                        topic.trueAnswer.indexOf(item.label) !== -1
                          ? false
                          : true;
                    }
                  }
                } else {
                  if (topic.topicAnswer.answer == item.label) {
                    item.selected = true;
                    // !!!用于检查是否错误
                    if (this.status == "result") {
                      item.error =
                        topic.trueAnswer.indexOf(item.label) !== -1
                          ? false
                          : true;
                    }
                  }
                }
              });
              topic.haveAnswer = true;
            } else {
              topic.haveAnswer = false;
            }
          }
          // 如果是判断题
          if (topic.topicType == 2) {
            // （用于初始化）
            topic.topicOptionList = [
              {
                optionValue: "正确",
              },
              {
                optionValue: "错误",
              },
            ];
            // (用于进行中答案的显示)
            if (topic.topicAnswer && topic.topicAnswer.answer == "错误") {
              topic.topicOptionList[1].selected = true;
              topic.haveAnswer = true;
              // !!!用于检查是否错误
              if (this.status == "result") {
                topic.topicOptionList[1].error =
                  topic.topicAnswer.answer == topic.trueAnswer ? false : true;
              }
            } else if (
              topic.topicAnswer &&
              topic.topicAnswer.answer == "正确"
            ) {
              topic.topicOptionList[0].selected = true;
              topic.haveAnswer = true;
              // !!!用于检查是否错误
              if (this.status == "result") {
                topic.topicOptionList[0].error =
                  topic.topicAnswer.answer == topic.trueAnswer ? false : true;
              }
            } else {
              topic.haveAnswer = false;
            }
          }
          // 如果是填空题
          if (topic.topicType == 3) {
            // （用于初始化）
            topic.topicOptionList = [];
            for (let i = 0; i < topic.optionCount; i++) {
              topic.topicOptionList.push({
                optionValue: "",
              });
            }
            // (进行中用于答案赋值)
            if (topic.topicAnswer) {
              topic.topicOptionList.map((option, optionIndex) => {
                option.optionValue =
                  topic.topicAnswer.multiAnswers[optionIndex];
                if (option.optionValue) {
                  option.selected = true;
                }
                // !!!用于答案判断
                if (this.status == "result") {
                  option.error =
                    (optionIndex + 1 + ". " + option.optionValue).trim() ==
                    (topic.trueAnswer &&
                      topic.trueAnswer.split(";")[optionIndex].trim())
                      ? false
                      : true;
                }
              });
              // 判断数量是否全部回答完
              if (topic.topicAnswer.multiAnswers.length == topic.optionCount) {
                topic.haveAnswer = true;
              }
            }
          }
          // 如果是简答题
          if (topic.topicType == 4 || topic.topicType == 5) {
            topic.fileInfo =
              topic.topicAnswer && topic.topicAnswer.fileInfo
                ? JSON.parse(topic.topicAnswer.fileInfo).map((item) => {
                    return {
                      url: item.url,
                    };
                  })
                : [];
            if (
              (topic.topicAnswer && topic.topicAnswer.answered) ||
              topic.fileInfo.length > 0
            ) {
              topic.haveAnswer = true;
            }

            console.log(topic, "----------");
          }
        });
        this.topicList = [...this.topicList, ...item.topicList];
      });
      // 将试题分类
      this.topicType.map((item, index) => {
        item.list = this.topicList.filter((item2) => {
          return item2.topicType == index;
        });
      });

      // 在 考试 和 考核抽查 进行中才使用倒计时
      if (
        (this.type == "onlineExam" || this.type == "testCheck") &&
        this.status == "inProgress"
      ) {
        // 考试 和 考核抽查返回的res结构不同

        this.endTime =
          this.type == "onlineExam"
            ? new Date(res.endTime).getTime()
            : new Date(res.data.endTime).getTime();
        console.log("考试进行中,获取考试结束时间", this.endTime);
        this.time = this.endTime - Date.parse(new Date());
        // 定时器
        if (this.time < 0 || this.time == 0) {
          this.SumbitConfirm();
        } else {
          // 定时器
          let timeclock = this.endTime - Date.parse(new Date());
          this.clock = setInterval(() => {
            timeclock = timeclock - 1000;
            if (timeclock == 0) {
              this.SumbitConfirm();
              clearInterval(this.clock);
            }
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.shortAnswerBox {
  border-radius: 16rpx;
  box-sizing: border-box;
  border: 1rpx solid #f5f6f7;

  /deep/ .van-cell {
    padding: 0 0 20rpx 0;
  }

  .tip {
    margin-top: 14rpx;

    span {
      color: #e95756;
    }

    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  padding: 30rpx;
}

.NoContain {
  width: 750rpx;
  // height: 800rpx;
  background: white;

  .NoBox {
    box-sizing: border-box;
    padding: 0 32rpx 64rpx 32rpx;
    // overflow: auto;
    overflow-y: scroll;
    height: 656rpx;

    .NoBox_title {
      margin-top: 48rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;

      span {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-right: 24rpx;
      }
    }

    .NoBox_topic {
      .topicNo {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        border-radius: 36rpx;
        margin: 24rpx 32rpx 0 0;
        width: 72rpx;
        height: 72rpx;
        box-sizing: border-box;
        line-height: 72rpx;
        text-align: center;
        background: #ffffff;
        border: 2rpx solid #dddddd;
      }

      .topicNoAnswer {
        color: #2cacff !important;
        background: #daf1ff !important;
        border: 2rpx solid #daf1ff !important;
      }

      .topicNoCur {
        border: 2rpx solid #ff4d03 !important;
      }

      .topicNoError {
        color: #e95756 !important;
        background: #ffcfce !important;
        border: 2rpx solid #ffcfce !important;
      }
    }
  }

  .confirmbox {
    box-sizing: border-box;
    height: 144rpx;

    .confirmBtn {
      @include btn_plain_line(
        linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
        #ffffff,
        #ff9a00
      ) {
        width: 684rpx;
        height: 88rpx;
        border-radius: 44rpx;
      }
    }
  }
}

.cutdown {
  padding: 0 18rpx;
  border-radius: 25rpx;
  height: 51rpx;
  background: #fef4e9;

  .cutdown_icon {
    width: 38rpx;
    height: 38rpx;
    margin-right: 10rpx;
  }

  /deep/ .van-count-down {
    margin-top: 5rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ef7d00;
  }
}

::v-deep input {
  line-height: 40rpx;
  height: 40rpx !important;
  min-height: 40rpx !important;
}

.page {
  min-height: 100vh;
  background: white !important;
}

.bottomLine {
  padding-left: 32rpx;
  padding-right: 32rpx;
  padding-top: 10rpx;
  border-top: 1rpx solid #eeeeee;
  height: 100rpx;

  .pre {
    border: 1rpx solid #e5e5e5;

    @include btn_plain(#ffffff, #333333) {
      width: 240rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }

  .next {
    @include btn_plain_line(
      linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
      #ffffff,
      #ff9a00
    ) {
      width: 240rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }
}

/* 顶部题目进度栏 */
.topLine {
  height: 80rpx;
  padding: 0 32rpx 0 32rpx;

  .topicListIcon {
    width: 40rpx;
    height: 40rpx;
  }

  .topic {
    .topicFraction {
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 16rpx;
    }

    .topicProgress {
      width: 144rpx;
    }
  }
}

// swiper
.topicSwiper {
  box-sizing: border-box;

  .topicswiperItem {
    height: 100%;
    overflow: auto;
  }

  .topicItem {
    padding: 24rpx 34rpx 78px 24rpx;

    .topicItem_name {
      .topicItem_name_txt {
        text-indent: 2em;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 44rpx;
        white-space: pre-wrap;
      }

      .topicItem_type {
        overflow: hidden;
        top: 8rpx;
        text-align: center;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 28rpx;
        width: 52rpx;
        height: 28rpx;
        background: #4e8dff;
        border-radius: 8rpx 8rpx 8rpx 0rpx;
      }
    }

    .topicItem_option_error {
      background: #feeaea !important;
      color: #e95756 !important;
    }

    .topicItem_option_select {
      color: #2cacff !important;
      background: #daf1ff !important;
    }

    .topicItem_option {
      margin-bottom: 32rpx;
      padding: 24rpx 32rpx;
      box-sizing: border-box;
      width: 686rpx;
      border-radius: 8rpx;
      color: #333333;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40rpx;

      .topicItem_option_letter {
        height: 40rpx;
        line-height: 40rpx;
        margin-right: 32rpx;
      }

      .topicItem_option_txt {
        line-height: 40rpx;
        width: 565rpx;
      }
    }

    .topicItem_resolve {
      margin-top: 108rpx;

      .topicItem_resolve_title {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 44rpx;
      }
      .topicItem_resolve_true_teacherRemark {
        ::v-deep .van-cell {
          padding: 0 !important;
        }
        ::v-deep .van-field__body--textarea {
          padding: 0 !important;
        }
      }
      .topicItem_resolve_true {
        margin-top: 34rpx;
        ::v-deep .van-cell {
          padding-left: 0 !important;
        }
        .topicItem_resolve_true_lable {
          margin-right: 24rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40rpx;
        }

        .topicItem_resolve_true_value {
          width: 550rpx;
          margin-right: 5rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff4d03;
          line-height: 40rpx;
        }
      }

      .topicItem_resolve_txt {
        margin-top: 16rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
      }
    }
  }
}
</style>
